<script setup lang="ts">
import {
  inject, onMounted,
  reactive,
  ref,
} from 'vue';

import {
  ElMessage,
  FormInstance,
  FormRules,
} from 'element-plus';
import {
  ElLoading
} from 'element-plus';
import {login} from "@/api/module/login";
import {useUserStore} from "@/store/user";
import {User} from "@/types/user";
import router from "@/router";

import {SocketData, system_connect} from "@/data/SocketData";
import {useRouter} from "vue-router";
//socket
const ss = inject('socket');
//使用用户信息存储
const userStore = useUserStore();
//登陆表单数据
const loginForm = reactive({
  account: '',
  password: '',
  captcha: ''
})

const route = useRouter();
//校验规则
const rules = reactive<FormRules<typeof loginForm>>({
  account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
  password: [{
    validator: (rule: any, value: any, callback: any) => {
      if (value === '') {
        callback(new Error('密码不能为空'))
      } else if (loginForm.password.length < 6) {
        callback(new Error("密码不能小于6位字符"))
      } else {
        callback()
      }
    }, trigger: 'blur'
  }],
  captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
})
//form表单的实例
const formRef = ref<FormInstance>()
/**
 * 提交
 */
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((isValid: boolean) => {
    if (!isValid) {
      return;
    }
  })
  //显示加载动画
  const loading = ElLoading.service({
    lock: true,
    text: '正在登陆',
    background: 'rgba(0, 0, 0, 0.7)',
  });
  login(loginForm.account,loginForm.password,'pwd')
      .then((data)=>{
        if (data.code === 200) {
          //登陆成功
          ElMessage({
            message: '登陆成功',
            type: 'success',
          })
          //保存token
          const loginUser: User = {
            id: data.data.userInfo.id,
            token: data.data.saTokenInfo.tokenValue,
            username: data.data.userInfo.username,
            headIcon: data.data.userInfo.headIcon
          };
          userStore.setUserInfo(loginUser);
          //发送socket消息
          const socketMsg = reactive<SocketData>(system_connect)
          socketMsg.authToken = loginUser.username;
          ss.send(socketMsg)
          //跳转到首页
          router.push("/index")
        }else {
          //登陆失败
          ElMessage.error(data.msg)
        }
      })
  loading.close();
}

const registration =  () => {
  route.push({
    path:'/registration'
  });
}
</script>

<template>
  <div class="loginPage">
    <el-card class="loginPanel">
      <div class="loginPanelInner">
        <div class="logo">
          <img src="../assets/htuLogo.png">
        </div>
        <el-divider direction="vertical" border-style="dashed" class="split" />
        <div class="loginForm">
          <div class="systemName"> 用户登陆 </div>

          <el-button type="primary" @click="registration" class="loginBtn"> 注册 </el-button>

          <el-form ref="formRef" size="large" :model="loginForm" status-icon :rules="rules"
                   label-width="120px" class="form">
            <el-form-item label="账号：" prop="account">
              <el-input v-model="loginForm.account" placeholder="请输入账号" autocomplete="off"
                        suffix-icon="UserFilled" />
            </el-form-item>
            <el-form-item label="密码：" prop="password">
              <el-input v-model="loginForm.password" placeholder="请输入密码" type="password"
                        autocomplete="off" suffix-icon="Lock" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm(formRef)" class="loginBtn">
                登陆 </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-card>
    <div class="footer">
      @Copyright 校园拼课系统
    </div>
  </div>
</template>

<style scoped>
.loginPage {
  width: 100%;
  height: 800px;
  display: flex;
  justify-items: center;
  justify-content: center;
  align-items: center;
  background: linear-gradient(133deg, #1994bb, #19acbb, #19b4bb, #2a89db);
}

.loginPage .loginPanel {
  width: 60%;
  height: 60%;
  min-width: 600px;
  max-width: 1000px;
  min-height: 400px;
  max-height: 500px;
  margin: 0 auto;
}

.loginPage .loginPanel>>>.el-card__body {
  width: 100%;
  height: 100%;
}

.loginPage .loginPanel .loginPanelInner {
  width: 100%;
  height: 100%;
  display: flex;
}

.loginPage .loginPanel .loginPanelInner .logo {
  width: 40%;
  text-align: center;
  display: flex;
  justify-items: center;
  justify-content: center;
  align-items: center;
}

.loginPage .loginPanel .loginPanelInner .logo img {
  width: 50%;
}

.loginPage .loginPanel .loginPanelInner .split {
  height: calc(100% - 40px);
}

.loginPage .loginPanel .loginPanelInner .loginForm {
  flex: 1;
}

.loginPage .loginPanel .loginPanelInner .loginForm .systemName {
  text-align: center;
  font-size: 30px;
  line-height: 60px;
  letter-spacing: 3px;
  margin-bottom: 20px;
}

.loginPage .loginPanel .loginPanelInner .loginForm .form {
  width: 80%
}

.loginPage .loginPanel .loginPanelInner .loginForm .form .loginBtn {
  width: 100%;
}

.loginPage .loginPanel .loginPanelInner .loginForm .form .captchaSrc {
  width: 100px;
  height: 100%;
  padding-left: 10px;
}

.loginPage .loginPanel .loginPanelInner .loginForm .form .captchaSrc img {
  width: 100px;
  height: 100%;
  cursor: pointer;
}

.loginPage .loginPanel .loginPanelInner .loginForm .form .registerBtn {
  text-align: right;
  line-height: 40px;
  margin-bottom: 5px;
}

.footer {
  position: fixed;
  bottom: 0px;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
  color: #fff;
}
</style>
